<template>
    <view :style="'direction:' + $t('dir')" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'">
        <!-- 头部导航栏 -->
        <navbar :title="$t('the_people_i_invited')" />

        <view class="main">
            <view class="money-lists px-sm">
                <view class="profit">
                    <view class="profit-list d-flex items-center justify-between" v-for="(item, index) in list" :key="index">
                        <view class="avatar-nickname d-flex items-center">
                            <view class="avatar-class" style="">
                                <image class="avatar-image" style="width: 100%; height: 100%" :src="item.avatar" />
                            </view>
                            <view>
                                <view style="font-size: 16px">{{ item.nickname }}</view>
                                <view class="fs-xxs text-gray dir-ltr">{{ substrDate(item.created_at) }}</view>
                                <view class="row items-center">
                                    <u-icon name="phone-fill" size="40rpx" color="#a5a4a4" />
                                    <view class="dir-ltr">
                                        {{ geTel(item.mobile) }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <u-empty v-if="list && list.length == 0" mode="list" icon="/static/images/empty.png" :text="$t('no_content')" style="padding-top: 200rpx" />
                    <view class="empty" v-if="end">
                        <view class="empty-dot">
                            <text class="empty-dot-text"></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            current_page: 1,
            last_page: 1,
            end: false,
        }
    },
    methods: {
        geTel(tel) {
            var reg = /^(\d{3})\d{5}(\d{3})$/
            return tel.replace(reg, '$1*****$2')
        },
        async _sub_member(onReachBottom) {
            uni.showLoading({
                title: '',
            })
            let res = await this.$uniapi('/sub_member', { page: this.current_page, pageSize: 10 })
            uni.hideLoading()
            if (res.code == 0) {
                let resData = res.data
                this.list = onReachBottom ? this.list.concat(resData.data) : resData.data
                this.current_page = resData.current_page
                this.last_page = resData.last_page
            }
        },

        substrDate(dateTime) {
            let date = ''
            if (dateTime && dateTime.length > 0) {
                date = dateTime.substr(0, 19)
            }
            return date
        },
    },
    onShow() {
        uni.setNavigationBarTitle({
            title: this.$t('the_people_i_invited'),
        })
    },
    onLoad() {
        this._sub_member()
    },
    onReachBottom() {
        if (this.last_page > this.current_page) {
            this.current_page++
            this._sub_member(true)
        } else this.end = true
    },
}
</script>
<style scoped lang="scss">
.main {
    padding: 15px;
}
.main .money-lists {
    margin-top: 20px;
}
.profit-list {
    margin-top: 15px;
    border-bottom: 1rpx solid #eaeaea;
    padding-bottom: 10px;
}
.avatar-class {
    height: 90rpx;
    width: 90rpx;
    margin: 0 10px;
}
.avatar-image {
    height: 65px;
    width: 65px;
    border-radius: 50%;
    border: 1px solid #3669ee;
}
</style>